<template>
  <scale-screen
    width="1920"
    height="1080"
    :delay="500"
    :fullScreen="false"
    :boxStyle="{
      background: '#03050C',
      overflow: isScale ? 'hidden' : 'auto',
    }"
    :wrapperStyle="wrapperStyle"
    :autoScale="isScale"
  >

    <div class="content-wrap">
      <dv-loading v-if="loading">
        <div style="color: #00FAFF;font-size: 20px">
          Loading...
        </div>
      </dv-loading>
      <div v-else>
        <Headers />
        <el-row class="center-content" justify="space-between">
          <template v-if="getIsHome">
            <el-col :span="24">
              <router-view/>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="1" class="content-go-left" @click="goLeftOrRight(1)">
              <div class="go-default go-left"></div>
            </el-col>
            <el-col :span="22">
              <router-view/>
            </el-col>
            <el-col :span="1" class="content-go-right" @click="goLeftOrRight(2)">
              <div class="go-default go-right"></div>
            </el-col>
          </template>
        </el-row>
        <MessageContent />
      </div>
    </div>
  </scale-screen>
  <setting />
</template>

<script setup lang="ts">
import ScaleScreen from "@/components/ScaleScreen";
import Headers from "./header.vue";
import Setting from "./setting.vue";
import useSettingStore from "@/stores/setting";
import MessageContent from "@/components/MessageContent";

const isScale = true
const wrapperStyle = {};
const router = useRouter()
const loading = ref(true)

onMounted(()=>{
  clearLoading()
})

const getIsHome = ref(true)

watchEffect(() => {
  getIsHome.value = router.currentRoute.value.path === '/index' || router.currentRoute.value.path === '/alarm'
})

function goLeftOrRight(sign){
  useSettingStore().changeCurrentIndex(sign)
}
function clearLoading(){
  let timer = setTimeout(()=>{
    loading.value = false
    clearTimeout(timer)
  },500)
}
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 100%;
  height: 100%;
  padding: 16px 16px 10px 10px;
  box-sizing: border-box;
  background-image: url("@/assets/img/pageBg.png");
  background-size: cover;
  background-position: center center;

  .center-content{
    width: 100%;
    height: 960px;
    min-height: calc(100% - 60px);
    .content-go-left,
    .content-go-right{
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      cursor:pointer;
      height: 100%;
      .go-default{
        width: 60px;
        height: 60px;
        background-size: cover;
        background-position: center center;
      }
      .go-left{
        background-image: url("@/assets/img/left.png");
      }
      .go-right{
        background-image: url("@/assets/img/right.png");
      }
    }
    .content-go-left{
      align-items: flex-start;
    }
    .content-go-right{
      align-items: flex-end;
    }
  }

}
</style>
